<template>
	<view class="redrain">
    <!-- <image src="https://ctyh88.oss-cn-shenzhen.aliyuncs.com/gcn/1597131119227.jpg" mode="widthFix" class="red-top1"></image>
    <view class="btnsred" style="background: linear-gradient(0deg,rgba(240,107,37,1),rgba(238,197,27,1));" >立即领取红包</view> -->
      <view>
        <view style="background-image:url(https://videocun.oss-cn-beijing.aliyuncs.com/06aae202202212214064859.png);width:;100%;height:100vh;" class="bg-cover"></view>
        <view style="background-image:url(https://videocun.oss-cn-beijing.aliyuncs.com/aba30202202212213536126.png);width:622rpx;height:910rpx;position: absolute;top: 100rpx;left: 60rpx;background-repeat: no-repeat;background-position: center;background-size: contain;">
        <view>
            <view style="margin-bottom:22rpx;position: absolute;bottom: 400rpx;left: 160rpx;" class="view flex-row align-center">
              <image :src="user.avatar" style="width:100rpx;height:100rpx;border-radius: 50%;" class="m-r-20"/>
              <view style="color:#FFEFBB;font-size:24rpx;">{{user.nickname}}发来的红包</view>
            </view>

            <view class="view flex-row align-end text-center" style="position: absolute;bottom: 150px;  left: 120px;">
              <view style="font-size:40px;color:#FFEFBB;">{{user.coupon_price}}</view>
              <view style="font-size:28rpx;" class="c-fff">元</view>
            </view>
        </view>

        <view style="background-color:#dfb370;border-radius:60rpx;font-size:40rpx;color:#fff;line-height: 80rpx;position: absolute;bottom: 80px;left: 100rpx;width: 400rpx;text-align: center;" @click="openred">
          立即领取
        </view>
      </view>

      <home></home>
    </view>
    
  </view>
</template>

<script>
  import home from '@/components/home';
 
  import {
		toLogin
	} from '@/libs/login.js';
  // #ifdef MP
	import authorize from '@/components/Authorize';
	// #endif
  import {
		getCouponsShare,
    getuserConfig
	} from '@/api/activity.js';
  import {
		mapGetters
	} from "vuex";
  import util from '@/utils/util.js'
	export default {
    components: {
			// #ifdef MP
			authorize,
			// #endif
			home
      
		},
		data() {
			return {
        cpuid: '',
        user: {}
			};
		},
    methods:{
      async getAvac() {
        
        const res = await getuserConfig(this.cpuid)
        uni.showToast({
          title: res.msg
        })
        this.user = res.data
      },
      openred(){
        uni.showLoading();
        getCouponsShare(this.cpuid).then( res => {
            uni.hideLoading();
            if (res.status == 200) {
              this.$util.Tips({
                  title: res.msg,
                  icon: 'success'
                },{tab:1,url:'/pages/index/index'});
            } else {
              this.$util.Tips({
                  title: res.msg,
                },{tab:1,url:'/pages/index/index'});
            }
        }).catch(err => {
          uni.hideLoading();
					this.$util.Tips({
						title: err
					},{tab:1,url:'/pages/index/index'})
				})
      
      }
    },
    computed: mapGetters(['isLogin']),
    onShow() {
      // 获取当前小程序的页面栈
      let pages = getCurrentPages();
      // 数组中索引最大的页面--当前页面
      let currentPage = pages[pages.length - 1];
      // 打印出当前页面中的 options
      const {  options } = currentPage
      if (this.isLogin) {
        this.cpuid = options.cpuid
        if (this.cpuid) {
          this.getAvac()
        }
        
      } else {
        toLogin();
      }
    },
    onLoad(option) {
      if (this.isLogin) {
        this.cpuid = option.cpuid
        if (this.cpuid) {
          this.getAvac()
        }
        
      } else {
        toLogin();
      }
		},
	}
</script>

<style lang="scss" scoped>

  .redrain{
    height: 100vh;
    width:100%;
    // background:linear-gradient(0deg,rgba(255,63,29,1) 0%,rgba(255,133,60,1) 99%);
    // padding: 25rpx;
    .red-top{
      // background: url('https://ctyh88.oss-cn-shenzhen.aliyuncs.com/gcn/1597125857776.jpg') no-repeat;
      // width: 730rpx;
      // height: 560rpx;
      // background-size: cover;
      // background-position: center;
    }
    .red-top1{
      width: 730rpx;
    }
    .btnsred{
      width:590rpx;
      height:110rpx;
      background:linear-gradient(0deg,#f7d28f,#f7d28f);
      border-radius:55rpx;
      line-height: 110rpx;
      margin:80rpx auto;
      font-size: 36rpx;
      text-align: center;
      color: #fff;
    }
    // .red-bottom{

    // }
  }
</style>
